<template>
  <!--登录-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="login">
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <Row>
          <i-col :span="15" style="border-right: 1px solid #ccc">
            <div class="user">
              <h2 class="h">用户登录</h2>
              <div class="p p1">
                <FormItem prop="name">
                  <span class="spa">用户名：</span>
                  <Input placeholder="输入用户名" style="width: auto" v-model="formInline.name"/>
                </FormItem>
                <span class="spa1">* 请输入注册的用户名</span>
              </div>
              <div class="p p2">
                <FormItem prop="pwd">
                  <span class="spa">密码：</span>
                  <Input type="password" placeholder="输入密码" style="width: auto" v-model="formInline.pwd"
                         @keyup.enter.native="handleSubmit('formInline')"/>
                </FormItem>
                <span class="spa1">* 请输入密码，区分大小写</span>
              </div>
              <!--<div class="p p3">-->
              <!--<Checkbox v-model="single">记住我</Checkbox>-->
              <!--</div>-->
              <p>
                <RadioGroup v-model="multipleChoice" class="multipleChoice">
                  <Radio label="我是读者"></Radio>
                  <Radio label="我是编辑"></Radio>
                </RadioGroup>
              </p>
              <div class="p p4">
                <FormItem>
                  <Button type="primary" icon="ios-unlock" @click="handleSubmit('formInline')">立即登录</Button>
                </FormItem>
              </div>
            </div>
          </i-col>

          <i-col :span="9">
            <div class="register">
              <p class="p">如果您还不是会员，请注册</p>
              <p class="p">
                <router-link to="/signin">
                  <Button type="primary" icon="ios-contact">用户注册</Button>
                </router-link>
              </p>
              <p class="p">忘记密码？</p>
            </div>
          </i-col>
        </Row>
      </Form>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'

  export default {
    components: {
      carousel
    },
    data() {
      return {
        submitFormUrl: this.$api.url + '/user/login',
        single: true,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "/text02?id=174",
          },
        ],
        autoplaySpeed: 100000,

        formInline: {
          name: '',
          pwd: ''
        },
        multipleChoice: '我是读者',
        ruleInline: {
          name: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    mounted() {
      this.getCookie();
    },
    methods: {
      handleSubmit(formInline) {
        this.$refs[formInline].validate((valid) => {
          if (valid) {
            this.$axios.post(
              this.submitFormUrl, this.formInline
            ).then(function (res) {
              if (res.data != '') {
                if (res.data.state == 0) {
                  localStorage.setItem('ms_user', this.formInline.name);
                  localStorage.setItem('ms_userid', res.data.id);
                  this.$router.push('/');
                  setTimeout(() => {
                    this.$router.go(0);
                  }, 100);
                }
              } else {
                this.show = true;
                this.$Message.error('账号或密码不正确!');
              }
            }.bind(this)).catch(function (error) {

            });
          } else {
            return false;
          }
        });

        const self = this;
        if (self.single == true) {
          self.setCookie(self.formInline.name, self.formInline.pwd, 7);
        } else {
          self.clearCookie();
        }

      },
      //设置cookie
      setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date();
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
        window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
      //读取cookie
      getCookie: function () {
        if (document.cookie.length > 0) {
          var arr = document.cookie.split('; ');
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split('=');
            if (arr2[0] == 'userName') {
              this.formInline.name = arr2[1];
            } else if (arr2[0] == 'userPwd') {
              this.formInline.pwd = arr2[1];
            }
          }
        }
      },
      //清除cookie
      clearCookie: function () {
        this.setCookie("", "", -1);
      }

    },
  }
</script>

<style scoped>
  .login {
    padding: 50px 0;
  }

  .login .user {
    padding-left: 15%;
  }

  .login .user .h {
    margin-bottom: 10px;
  }

  .login .user .p, .login .register .p {
    font-weight: bold;
    font-size: 14px;
  }

  .multipleChoice {
    padding-bottom: 10px;
  }

  .login .register .p {
    padding: 10px 0;
  }
  .login .user .p .spa {
    display: inline-block;
    width: 60px;
  }

  .login .user .p .spa1 {
    display: inline-block;
    padding-left: 50px;
  }

  .login .user .h, .login .user .p3 .ivu-checkbox-wrapper, .login .user .p4 .ivu-btn {
    margin-left: 60px;
  }

  .login .register {
    margin-left: 150px;
    margin-top: 50px;
  }

  .ivu-btn-primary {
    background-color: #2b369f;
    border-color: #2b369f;
  }
</style>
